<template>
  <div>
    <h1>参与拼团列表</h1>
    <el-form :inline="true" :model="listFrom" class="demo-form-inline">
      <el-form-item label="拼团状态">
        <el-select
          v-model="listFrom.typeId"
          placeholder="请选择拼团状态"
          clearable
          style="width: 180px"
        >
          <el-option label="待成团" value="0" />
          <el-option label="拼团成功" value="1" />
          <el-option label="拼团失败" value="2" />
          <el-option label="已取消" value="3" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="list()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="groupId" label="id" width="180" />
      <el-table-column prop="joinName" label="活动名称" width="180" />
      <el-table-column prop="userName" label="团长" />
      <el-table-column prop="teamLimit" label="成团人数" />
      <el-table-column prop="joinNum" label="参团人数" />
      <el-table-column prop="beginTime" label="开团时间" />
      <el-table-column prop="endTime" label="截止时间" />
      <el-table-column prop="groupStatus" label="拼团状态">
        <template #default="scope">
          <el-tag v-if="scope.row.groupStatus == 0">待成团</el-tag>
          <el-tag v-if="scope.row.groupStatus == 1" type="danger"
            >拼团成功</el-tag
          >
          <el-tag v-if="scope.row.groupStatus == 2" type="info"
            >拼团失败</el-tag
          >
          <el-tag v-if="scope.row.groupStatus == 3" type="success"
            >已取消</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <div class="demonstration"></div>
      <el-pagination
        v-model:current-page="listFrom.pageNum"
        v-model:page-size="listFrom.pageSize"
        :page-sizes="[2, 4, 6, 8]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getGroupList } from "../api/api";
const tableData = ref([]);
const total = ref(0);
const listFrom = ref({
  pageNum: 1,
  pageSize: 2,
  typeId: null,
});
const list = () => {
  getGroupList(listFrom.value).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    }
  });
};
//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  listFrom.value.pageSize = val;
  list();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  listFrom.value.pageNum = val;
  list();
};
onMounted(() => {
  list();
});
</script>
